{% load i18n %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Read the Docs</title>

  <style type="text/css">
/* Styles */
a img { border: none; }
table { border-collapse: collapse !important; }
#outlook a { padding:0; }
.ReadMsgBody { width: 100%; }
.ExternalClass {width:100%;}
table td {border-collapse: collapse;}
.ExternalClass * {line-height: 115%;}

@media (max-width: 600px), (max-device-width: 600px) {
  #content-wrapper {
    width: 100%;
  }

  td.header img {
    width: 100%;
    height: 150px;
  }
}

a {
  color: #465158;
}

p {
  color: #443 !important;
}

{% block extra-styles %}{% endblock %}

  </style>
</head>
<body offset="0" style="padding:0; margin:0; display:block; background:#ececec; font-family: Helvetica, Arial, sans-serif; font-size: 14px; color: #443;" bgcolor="#ececec">
  <table id="content-wrapper" align="center" cellpadding="0" cellspacing="0" width="600">
    <!-- BEGIN top spacing -->
    <tr>
      <td>
        <table align="center" width="100%" height="64" cellpadding="0" cellspacing="0" style="width: 100% !important; padding: 8px; color: #acacac;">
          <tr>
            <td width="100%" align="right" style="text-align: right;" valign="bottom">
              {% block top-right %}{% endblock %}
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <!-- END top spacing -->

    <!-- BEGIN content -->
    <tr>
      <td>
        <table align="center" width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; margin-bottom: 64px;" bgcolor="#ffffff">
          <!-- BEGIN header -->
          <tr>
            <td class="header">
              {% block header %}
              <img src="https://assets.readthedocs.org/static/images/email-header.png" width="100%" height="150" />
              {% endblock %}
            </td>
          </tr>
          <!-- END header -->

          <tr>
            <td style="padding: 8px; padding-top: 16px;">
              <table width="100%" cellpadding="0" cellspacing="0">
                <tr>
                  <td style="font-weight: bold;">
                    {% block salutation %}
                      {% trans "Hello!" %}
                    {% endblock %}
                  </td>
                </tr>
                <tr>
                  <td style="padding-top: 16px; padding-bottom: 16px; color: #443 !important;">
                    {% block content %}
                    {% endblock %}
                  </td>
                </tr>
                <tr>
                  <td>
                    {% block signature %}
                      {% trans "Keep documenting," %}<br />
                      {% trans "Read the Docs" %}
                    {% endblock %}
                  </td>
                </tr>
              </table>
            </td>
          </tr>

          <!-- BEGIN footer -->
          <tr>
            <td style="background: red;">
              <table align="center" width="100%" height="64" cellpadding="0" cellspacing="0" style="width: 100% !important; background-color: #443; color: #aa9;">
                <tr>
                  <td align="left" valign="top" style="padding: 8px;">
                    {% block footer %}
                      Read&nbsp;the&nbsp;Docs<br/>
                      <a href="https://readthedocs.org" style="color: #bba;">https://readthedocs.org</a><br/>
                    {% endblock %}
                  </td>
                </tr>
              </table>
            </td>
          </tr>
          <!-- END footer -->
        </table>
      </td>
    </tr>
    <!-- END content -->
  </table>
</body>
</html>
